<template>
  <div class="student_container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="学号">
        <el-input v-model="formInline.id" placeholder="请输入学号" />
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="formInline.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addStudent">新增学生</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="showList" border style="width: 100%">
      <el-table-column prop="id" label="学号" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="sex" label="性别" />
      <el-table-column prop="age" label="年龄" />
      <el-table-column prop="major" label="专业" />
      <el-table-column prop="class" label="班级" />
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button plain type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <AddModal :dialogVisible="dialogVisible" @update:dialogVisible="(status) => dialogVisible = status"
    @confirm="onConfirm" />
</template>

<script setup>
import { reactive, ref } from 'vue'
import AddModal from '../../components/AddModal.vue'
import { ElMessage } from 'element-plus'
let dialogVisible = ref(false)
const formInline = reactive({
  id: '',
  name: '',
})
const tableData = [
  {
    id: '2023123456',
    name: '诸葛亮',
    sex: '男',
    age: 20,
    major: '软件技术',
    class: '前端开发2023-01'
  },
  {
    id: '2023123457',
    name: '孙悟空',
    sex: '男',
    age: 19,
    major: '软件技术',
    class: '前端开发2023-01'
  },
  {
    id: '2023154321',
    name: '林黛玉',
    sex: '女',
    age: 18,
    major: '软件技术',
    class: '前端开发2023-01'
  },
  {
    id: '2023123458',
    name: '猪八戒',
    sex: '男',
    age: 21,
    major: '软件技术',
    class: '前端开发2023-01'
  },
  {
    id: '2023123459',
    name: '鲁智深',
    sex: '男',
    age: 20,
    major: '软件技术',
    class: '前端开发2023-01'
  }
]

const addStudent = () => {
  dialogVisible.value = true
}

let showList = ref(tableData)
const onSubmit = () => {
  showList.value = tableData.filter(item => {
    return item.id.includes(formInline.id) && item.name.includes(formInline.name)
  })
}

const onConfirm = (data) => {
  tableData.unshift(data)
  onSubmit() // 重新触发一次查询，保证新增的学生也能显示
  dialogVisible.value = false
  ElMessage.success({
    message: '添加成功',
    type: 'success',
  })
}

const handleDelete = (row) => {
  showList.value = showList.value.filter(item => item.id !== row.id)
}
</script>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>